<template>
  <div>
		<div class="infowindows">
      <h2 class="title">{{title}}<img src="../../assets/image/icon/arrows.png" class="icon" /></h2>
      <div class="content">
        <slot></slot>
      </div>
      <img class="close" src="../../assets/image/icon/close.png" @click="close()">
		</div>
  </div>
</template>

<script>
export default {
  name: 'InfoWindow',
  props: {
    title: [String]
  },
  data() {
    return {

    }
  },
  methods: {
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="less" scoped>

.infowindows{
	z-index: 999;
	position: absolute;
	width: 400px;
	left: 0;
  right: 0;
	top: 114px;
  margin: auto;
	/* background: #000; */
	border: 1px solid #153c62;
	box-sizing: border-box;
	box-shadow: inset 0 0 5px 5px #071c32;
	color: #fff;
	background: radial-gradient(circle, rgba(5,12,46,0.81), rgba(5,12,46,0.81));
  .title {
    text-align: left;
    // width: 149px;
    font-size: 20px;
    font-family: YouSheBiaoTiHei;
    font-weight: 500;
    color: #7DFCFE;
    // line-height: 30px;
    background: linear-gradient(0deg, #1DFCFF 0%, #189BFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 12px 0px 10px 20px;
    .icon {
      width: 27px;
      height: 11px;
      margin-left: 12px
    }
  }
  .content {
    max-height: 400px;
    overflow-y: scroll;
  }
  .close {
    position: absolute;
    right: 14px;
    top: 12px;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
}
</style>